<template>
    <div class='container'>
        <el-card class="box-card">
            <!-- 搜索区 -->
            <el-row
                type="flex"
                justify="space-between"
            >
                <el-col>
                    <el-form
                        :inline="true"
                        :model="formData"
                    >
                        <el-form-item
                            label="关键词"
                            style="margin-right:60px"
                        >
                            <el-input v-model.trim="formData.keyword"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select
                                v-model="formData.state"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="clear">清除</el-button>
                            <el-button
                                type="primary"
                                @click="search"
                            >搜索</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col>
                    <el-row
                        type="flex"
                        justify="end"
                    >
                        <div>
                            <el-button
                                type="success"
                                size="small"
                                @click="showAddDialog = true"
                            >
                                <i class="el-icon-edit"></i>
                                新增技巧
                            </el-button>
                        </div>
                    </el-row>
                </el-col>
            </el-row>

            <!-- 数据提示 -->
            <el-alert
                type="info"
                show-icon
                :closable='false'
            >
                <template slot='title'>
                    数据一共{{page.counts}}条
                </template>
            </el-alert>

            <!-- 表格 -->
            <el-table
                :data="articleLIst"
                style="width: 100%"
            >
                <el-table-column
                    type="index"
                    label="序号"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    label="文章标题"
                    width="400"
                >
                    <template v-slot="{row}">
                        {{row.title}}
                        <i
                            v-if="row.videoURL"
                            class="el-icon-film"
                            style="color:blue"
                            @click="showVideo(row)"
                        ></i>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="visits"
                    label="阅读数"
                >
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="录入人"
                >
                </el-table-column>
                <el-table-column label="录入时间">
                    <template v-slot="{row}">
                        {{row.createTime | parseTimeByString("{y}-{m}-{d} {h}:{m}:{s}")}}
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template v-slot="{row}">
                        {{row.state === 1 ? '已启用' :'已禁用'}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="操作"
                >
                    <template v-slot="{row}">
                        <el-button
                            type="text"
                            @click="showPreview(row)"
                        >预览</el-button>
                        <el-button
                            :disabled="!row.state===1"
                            type="text"
                            @click="changeState(row)"
                        >{{row.state===1 ? '禁用' : '启用'}}
                        </el-button>
                        <el-button
                            :disabled="!row.state===1"
                            type="text"
                            @click="update(row)"
                        >修改</el-button>
                        <el-button
                            :disabled="row.state===1"
                            type="text"
                            @click="deleteArt(row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-row
                type="flex"
                justify="end"
                class="pagination"
            >
                <div>
                    <el-pagination
                        background
                        :page-sizes="[10, 15, 20]"
                        :page-size="page.pagesize"
                        layout="prev, pager, next, sizes, jumper"
                        :total="page.counts"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.page"
                    >
                    </el-pagination>
                </div>
            </el-row>

            <!-- 视频弹层 -->
            <el-dialog
                :visible.sync="dialogPlay"
                width="55%"
                @close="closeDialog"
                class="videoDialog"
            >
                <video
                    :src="videoUrl"
                    controls
                    autoplay
                    width="100%"
                ></video>
            </el-dialog>
        </el-card>

        <!-- 预览组件 -->
        <articlesPreview
            v-model='showArticlesPreview'
            :currentArticle="currentArticle"
        ></articlesPreview>

        <!-- 添加编辑组件 -->
        <articlesAdd v-model="showAddDialog"  ref="addRef"></articlesAdd>
    </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles'
import { status } from '@/api/hmmm/constants'
import articlesPreview from '../components/articles-preview.vue'
import articlesAdd from '../components/articles-add.vue'
export default {
  name: 'Articles',
  data () {
    return {
      articleLIst: [],
      formData: {
        keyword: '',
        state: ''
      },
      page: {
        page: 1,
        pagesize: 10,
        counts: null
      },
      status: status,
      dialogPlay: false,
      videoUrl: '',
      //   控制预览显示
      showArticlesPreview: false,
      currentArticle: {},
      state: '', // 文章 禁用 启用状态
      // 添加编辑
      showAddDialog: false
    }
  },
  components: {
    articlesPreview,
    articlesAdd
  },
  methods: {
    async getArticleList (formData) {
      const { data } = await list(formData)
      this.articleLIst = data.items
      this.page.counts = data.counts
    },
    clear () {
      this.formData = {}
      this.getArticleList()
    },
    search () {
      this.getArticleList(this.formData)
    },
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getArticleList(this.page)
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.getArticleList(this.page)
    },
    showVideo (row) {
      this.dialogPlay = true
      this.videoUrl = row.videoURL
    },

    closeDialog () {
      this.videoUrl = '' // 清空数据 关闭视频播放
    },
    showPreview (row) {
      this.currentArticle = row
      this.showArticlesPreview = true
    },
    async changeState (row) {
      this.state = row.state === 1 ? 0 : 1
      const { data } = await changeState({ id: row.id, state: this.state })
      if (data.success) {
        this.$message.success('操作成功')
      }
      this.getArticleList()
    },
    update (row) {
      this.$refs.addRef.getArticleDetail(row)
      this.showAddDialog = true
    },
    deleteArt (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getArticleList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.getArticleList()
  }

}
</script>

<style scoped lang='scss'>
.box-card {
    margin: 0 10px 0 10px;
}
.el-table {
    margin-top: 15px;
}
.pagination {
    margin-top: 20px;
}
.videoDialog {
    ::v-deep .el-dialog__header {
        background: unset;
        padding: 0;
        border: 0;
    }
    ::v-deep .el-dialog__body {
        padding: 0;
        color: transparent;
        border: 0;
    }
    ::v-deep .el-dialog {
        box-shadow: unset;
        background: unset;
    }
    ::v-deep .el-dialog__headerbtn {
        width: 55px;
        height: 55px;
        left: 50%;
        top: -10%;
        transform: translate(-50%, -50%);
        background: black;
        border-radius: 50%;
        opacity: 0.5;
        .el-icon-close {
            font-size: 20px;
        }
    }
}
</style>
